<template>
  <div class="goods-card">
    <div @click="changeSelect" :style="{backgroundImage: `url(${data.thumbnails})`}" class="cover">
      <my-check
        v-if="!data.merchant_goods.length && (selectVisible || select.length === list.length) && (data.luxury_price || data.brief_price || data.sell_price)"
        :checked="checked"
        @change="changeSelect"
        style="margin: 5px;"
      ></my-check>
    </div>
    <div class="info-box flex1">
      <div class="title">{{data.title}}</div>
      <div class="desc">
        <div class="between-flex">
          <p>道具成本：{{data.cost_price || '-'}}</p>
          <p>已选人人宴：{{data.select_num || 0}}</p>
        </div>
        <span>{{data.date}}</span>
      </div>
    </div>
    <div v-if="data.merchant_goods.length" class="bg-modal">
      <span>已添加</span>
    </div>
    <div class="button-action">
      <div v-if="!data.merchant_goods.length" @click="showAdd" class="button">添加</div>
      <!-- <div v-if="!data.merchant_goods.length" class="split-line"></div>
      <div
        v-if="!data.merchant_goods.length"
        @click="changeDataStatus"
        class="button"
      >{{data.status ? '禁用' : '启用'}}</div>-->
      <div v-if="!data.merchant_goods.length" class="split-line"></div>
      <div @click="$router.push({path: '/goods/detail', query: {id: data.id}})" class="button">查看</div>
    </div>
    <a-modal v-model="visible" :width="450" :footer="false">
      <template #title>
        <h4>
          <span>方案定价</span>
          <small style="font-weight: norml;padding-left: 10px;color: #999">请根据实际情况谨慎定价</small>
        </h4>
      </template>
      <a-alert message="如需直接上架，请至少输入一个售价" banner closable />
      <a-row style="padding-top: 10px;">
        <a-col class="col-item" :span="4">
          <strong>套餐：</strong>
        </a-col>
        <a-col :span="20">
          <div
            v-for="(item, i) in formData"
            :key="item.type"
            class="col-item middle-flex between-flex"
          >
            <div>
              <span class="padding-right">{{typeText[item.type]}}</span>
              <span>道具成本：{{data.cost_price || '-'}}</span>
            </div>
            <div class="middle-flex">
              <strong>售价：</strong>
              <a-input-number :min="0" :max="1000000" v-model="formData[i].price" placeholder="售价" />
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="modal-footer">
        <a-button @click="visible = false">取消</a-button>
        <a-button @click="add" style="margin-left: 10px;" ghost type="primary">仅添加</a-button>
        <a-button @click="onlineAdd" style="margin-left: 10px;" type="primary">添加并上架</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import * as Api from "@/api/goods";

function getFormData(data = {}) {
  const list = [
    { type: "brief", price: data.brief_price, status: 0 },
    { type: "common", price: data.sell_price, status: 0 },
    { type: "luxury", price: data.luxury_price, status: 0 }
  ];
  const ls = list.filter(item => item.price);
  ls.forEach(item => {
    item.price = "";
  });
  return ls;
}

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    select: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
    checked: {
      type: Boolean,
      default: false
    },
    selectVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      typeText: {
        brief: "简约版",
        common: "轻奢版",
        luxury: "奢华版"
      },
      formData: getFormData(this.data)
    };
  },
  watch: {
    data(data) {
      this.formData = getFormData(data);
    }
  },
  methods: {
    async changeDataStatus() {
      // await Api.changeStatus(this.data);
      // this.$set(this.data, "status", !this.data.status);
    },
    changeSelect() {
      this.$emit("change", this.data.id);
    },
    changeStatus(status = 0) {
      this.formData.forEach(item => {
        item.status = !status || !item.price ? 0 : 1;
      });
    },
    showAdd() {
      if (this.select.length) {
        this.$confirmModal({
          key: "下架方案",
          title: "批量添加的方案不能直接定价上架",
          content: '请去"我的方案"中选择方案定价并上架',
          okText: "我知道了",
          onOk: this.toAdd
        });
      } else {
        this.visible = true;
      }
    },
    async toAdd() {
      const { select } = this;
      const goodsIds = select.length ? select : [this.data.id];
      const formData = goodsIds.map(goods_id => ({
        goods_id,
        price:
          goods_id === this.data.id
            ? this.formData
            : getFormData(this.list.find(it => it.id === goods_id))
      }));
      await Api.addMerchantGoods({
        content: JSON.stringify(formData)
      });
      const total = select.length;
      if (total) {
        this.$message.success(`成功添加了${total}套方案，请去"我的方案"中定价`);
      }
      this.$emit("refresh");
      this.visible = false;
      this.$emit("update:select", []);
    },
    add() {
      this.formData.map(it => {
        !it.price && (it.price = 0);
      });
      this.changeStatus(0);
      this.toAdd();
    },
    onlineAdd() {
      console.log(this.formData);
      let num = 0;
      this.formData.map(it => {
        if (it.price) num += 1;
      });
      console.log(num);
      if (num > 0) {
        this.formData.map(it => {
          !it.price && (it.price = 0);
        });
        this.changeStatus(1);
        this.toAdd();
      } else {
        this.$message.warning("请至少输入一个售价，不可为0");
        return;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.goods-card {
  width: 220px;
  height: 250px;
  background: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px #eee;
  position: relative;
  .bg-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
  }
}
.cover {
  cursor: pointer;
  height: 150px;
  border-bottom: 1px solid #eee;
}
.desc {
  color: #999;
  font-size: 12px;
  line-height: 1.4;
  padding-top: 5px;
}
.info-box {
  padding: 5px 10px;
}
.title {
  font-weight: bold;
  line-height: 1.5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-action {
  position: relative;
  height: 35px;
  display: flex;
  background: #f7f9fa;
  .button {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .split-line {
    background: #eee;
    height: 100%;
    width: 1px;
  }
}
.col-item {
  height: 32px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.padding-right {
  padding-right: 10px;
}
.modal-footer {
  padding-top: 16px;
  border-top: 1px solid #eee;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
